<template>
	<view class="merchant">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="search">
			<uni-search-bar placeholder="请输入关键字" cancelButton="none" @input="handleSearch"
				@clear="clearSearch"></uni-search-bar>
		</view>

		<view class="content-list">
			<view class="content-item" v-for="(item,index) in list" :key="index"
				@click="pageRoute('/agentPages/merchant-manage/store-list?id=' + item.id)">
				<view class="title">
					<view class="left">商户类型：<text>{{item.store_type_str}}</text></view>
					<view class="middle">门店数量：<text>{{item.store_num}}</text></view>
					<view class="right">商户状态：<text>{{item.status_str}}</text></view>
				</view>
				<view class="content">
					<image :src="item.store_logo"></image>
					<view class="info">
						<view>商户名：{{item.merchant_short_name || '待完善'}}</view>
						<view>联系人：{{item.contact_name || '待完善'}}</view>
						<view>联系电话：{{item.contact_phone || '待完善'}}</view>
						<view>商户地址：{{item.street_address || '待完善'}}</view>
						<view>入驻时间：{{item.create_time || '待完善'}}</view>
					</view>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂未有商户入驻</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<button class="btn" type="primary" @click="addMerchant(1)">联盟商家入驻</button>
				<button class="btn" type="primary" @click="addMerchant(2)">水站商家入驻</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商户管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
		agentAuth: false,
		params: {
			keyword: '',
			skip: 0,
		}
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getMerchantList();
		getAgentAuth();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		getMerchantList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getMerchantList();
	})

	function getMerchantList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		state.params.skip = state.list.length;
		console.log('查询条件', state.params);
		request.get('agent.merchant/list', state.params).then(res => {
			console.log('商户列表', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.data;
			} else {
				state.list = state.list.concat(res.data.data);
			}
		});
	}

	function handleSearch(e) {
		console.log('搜索', e);
		state.params.keyword = e;
		state.isMore = true;
		state.list = [];
		getMerchantList();
	}

	function clearSearch(e) {
		console.log('清除', e);
		state.params.keyword = '';
	}

	function getAgentAuth() {
		request.get('agent.merchant/openMerchantAuth', {}).then(res => {
			console.log('代理权限', res);
			state.agentAuth = res.data;
		});
	}

	function addMerchant(type) {
		if (type === 2) {
			// 水站入驻需要判断代理等级是否满足
			if (state.agentAuth.status) {
				pageRoute('/agentPages/merchant-manage/merchant-join?user_type=2');
			} else {
				uni.showToast({
					title: '邀请商户入驻需要达到J' + state.agentAuth.open_level + '等级，当前等级J' + state.agentAuth.agent_level,
					icon: 'none',
					mask: true,
					duration: 3000
				})
			}
		} else {
			// 联盟商家入驻没有限制
			pageRoute('/agentPages/merchant-manage/merchant-join?user_type=1');
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
		params,
	} = toRefs(state);
</script>

<style lang="scss">
	.merchant {
		.search {
			background: #fff;
			padding: 10rpx;
		}

		.content-list {
			padding-top: 20rpx;
			/* 根据按钮高度调整，防止内容被按钮遮挡 */
			padding-bottom: 50px;
			position: relative;

			.content-item {
				background: #fff;
				margin-bottom: $m12;

				.title {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 20rpx;

					.left {
						// padding-left: 20rpx;
					}

					.right {
						// padding-right: 20rpx;
					}
				}

				.content {
					display: flex;
					padding: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}

					.info {
						padding-left: 20rpx;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {
				display: flex;
			}
		}
	}
</style>